<template>
  <div class="main_box">
    <CommonHeader title="工作申报审核"></CommonHeader>
    <div class="main_content">
      <div class="declare_title">
        <div class="title">{{ declareData.title }}</div>
        <!-- <div
          class="state"
          :class="formateStateColor(declareData.declarationInfo.auditStatus)"
        >
          {{ formateState(declareData.auditStatus) }}
        </div> -->
      </div>
      <div class="form_title">申报内容</div>
      <div class="form_content">{{ declareData.content }}</div>
      <div class="form_title">附件</div>
      <div class="file_list" v-if="fileItem.annexName">
        <div class="file_item" @click="downloadFile(fileItem)">
          <i class="file_icon" :class="formateFileType(fileItem.annexName)"></i>
          <div class="content">{{ fileItem.annexName }}</div>
        </div>
      </div>
      <div v-else class="no_file">无附件</div>
      <div class="footer">
        <van-button type="default" @click="toBack">退回</van-button>
        <van-button type="primary" @click="toPass">通过</van-button>
      </div>
    </div>
    <van-popup v-model="show" style="width: 80%">
      <div style="margin: 20px 0; font-size: 22px">审核意见</div>
      <van-field v-model="examineContent" placeholder="请输入审核意见" type="textarea" style="height: 80px" :rules="[{ required: true, message: '请输入审核意见' }]" />
      <div class="footer" style="position: relative; bottom: 0; margin: 20px 0">
        <van-button type="default" @click="(show = false), (examineContent = '')">取消</van-button>
        <van-button type="primary" @click="ok">确定</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant';
import CommonHeader from '@/components/commonHeader';
export default {
  // eslint-disable-next-line
  name: 'DeclareDetail',
  components: {
    CommonHeader,
  },
  data() {
    return {
      examineStatus: '0',
      examineContent: '',
      show: false,
      fileItem: {},
      declareData: {
        title: '',
        state: '',
        content: '',
      },
      selectList: [
        {
          text: '全部',
          value: '',
        },
        {
          text: '待审核',
          value: '1',
        },
        {
          text: '已审核',
          value: '2',
        },
        {
          text: '未通过',
          value: '3',
        },
      ],
    };
  },
  computed: {
    formateState() {
      return function (state) {
        switch (state) {
          case '0':
            return '待审核';
          case '1':
            return '已审核';
          default:
            return '未通过';
        }
      };
    },
    formateStateColor() {
      return function (state) {
        switch (state) {
          case '2':
            return 'red';
          case '1':
            return 'blue';
          default:
            return '';
        }
      };
    },
    formateFileType() {
      return function (fileName) {
        if (fileName) {
          const arr = fileName.split('.');
          const type = arr[arr.length - 1];
          if (type === 'docx' || type === 'doc') {
            return 'word';
          } else if (type === 'xlsx' || type === 'xls') {
            return 'word';
          } else if (type === 'pdf') {
            return 'pdf';
          } else {
            return '';
          }
        } else {
          return '';
        }
      };
    },
  },
  created() {
    this.declareData = this.$route.query;
    console.log(this.declareData);
    this.fileItem =
      {
        annexName: this.declareData.enclosureName,
        filePath: this.declareData.enclosureAddress,
      } || {};
  },
  methods: {
    downloadFile(item) {
      window.open(item.filePath, '_blank');
    },
    toBack() {
      this.examineStatus = '2';
      this.show = true;
    },
    toPass() {
      this.examineStatus = '1';
      this.show = true;
    },
    ok() {
      const params = {
        employeeId: sessionStorage.getItem('employId'),
        declarationId: this.declareData.id,
        status: this.examineStatus,
        content: this.examineContent,
      };
      console.log(params);
      this.$api.declareExamine(params).then((res) => {
        console.log(res);
        if (res.status === 200) {
          this.show = false;
          this.examineContent = '';
          Toast.success('提交成功');
          setTimeout(() => {
            this.$router.go(-1);
          }, 1500);
        }
      });
    },
  },
};
</script>

<style scoped>
.footer {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 20px;
  display: flex;
  justify-content: space-evenly;
}
.main_box {
  min-height: 100vh;
  background-color: #f4f5fa;
  box-sizing: border-box;
}
.main_content {
  padding: 15px;
  box-sizing: border-box;
}
.declare_title {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  font-size: 14px;
  background-color: #fff;
  border-radius: 5px;
}
.declare_title .title {
  max-width: 75%;
  text-align: left;
}
.declare_title .state {
  height: 20px;
  line-height: 20px;
  padding: 0 10px;
  background-color: #7f7f7f;
  color: #fff;
  font-size: 13px;
  border-radius: 5px;
}
.declare_title .state.red {
  background-color: #f60e36;
}
.declare_title .state.blue {
  background-color: #4ca5f1;
}
.form_title {
  width: 100%;
  text-align: left;
  padding: 10px 0;
  font-size: 16px;
  color: #333;
}
.form_content {
  width: 100%;
  min-height: 80px;
  text-align: left;
  padding: 10px 15px;
  font-size: 14px;
  color: #666;
  background-color: #fff;
  box-sizing: border-box;
}
.file_list .file_item {
  display: flex;
  font-size: 14px;
  color: #2a81e6;
  padding: 10px 15px;
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 8px;
}
.file_list .file_item .content {
  width: calc(100% - 60px);
  height: 30px;
  line-height: 30px;
  text-align: left;
  padding: 0 10px;
  margin-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file_list .file_item .file_icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: url('../../assets/image/file.png') no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
.file_list .file_item .file_icon.pdf {
  background: url('../../assets/image/Pdf.png') no-repeat;
  background-size: 100% 100%;
}
.file_list .file_item .file_icon.word {
  background: url('../../assets/image/word.png') no-repeat;
  background-size: 100% 100%;
}
.file_list .file_item .file_icon.excel {
  background: url('../../assets/image/excel.png') no-repeat;
  background-size: 100% 100%;
}
.no_file {
  width: 100%;
  text-align: left;
  padding: 10px 15px;
  font-size: 14px;
  color: #999;
  background-color: #fff;
  box-sizing: border-box;
}
</style>